<template>
  <div class="running-item">
    <div class="title">{{ topData[item.titleKey] || "---" }}</div>
    <template v-if="item.type === 'syl'">
      <div class="syl">
        <div :class="item.sylKey" class="chat">
          <a-progress :gapDegree="90"
                      :percent="topData[item.sylKey]"
                      :size="100"
                      :stroke-color="{'0%': item.color,'100%': item.activeColor,}"
                      :strokeWidth="10" stroke-linecap="square" trail-color="#2f424c" type="dashboard"
          />
          <div class="name">
            {{ item.name }}
          </div>
        </div>
      </div>
    </template>
    <template v-if="item.type === 'cp'">
      <div class="cpio">
        <div class="topData">
          <div class="cplx">
            {{ topData.cplx || "---" }}
          </div>
          <div class="san">
            <div v-for="data in item.topList" :key="data.key" class="sanItem">
              <div class="data">{{ topData[data.key] || 0 }}{{ data?.dw }}</div>
              <div class="name">{{ data.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-if="item.type === 'cpkj'">
      <div class="cpkj">
        <div class="topData">
          <div class="data">{{ topData[item.topKey] || 0 }}</div>
          <div class="name">{{ item.name }}</div>
        </div>
      </div>
    </template>
    <List :datas="listData[item.titleKey]" :dw="item.dw" :type="item.type"></List>
  </div>
</template>

<script setup>
import List from "../list/index.vue"
defineProps({
  listData: {
    type: Object,
    default: () => {
    }
  },
  topData: {
    type: Object,
    default: () => {
    }
  },
  item: {
    type: Object,
    default: () => {
    }
  },
});
</script>

<style scoped lang="less">
@import "@/styles/__index.less";
.running-item {
  flex: 1;
  display: flex;
  padding: 0 12px;
  flex-direction: column;
  //height: 0;

  .data-list {
    flex: 1;
    height: 0;
    margin: 10px 0px;
    .row-list{
      height: 100%;
      display: flex;
      flex-direction: column;
    }
  }

  .title {
    font-weight: bold;
    color: #FFFFFF;
    font-size: 17px;
    display: flex;
    align-items: center;
    gap: 8px;

    &:before {
      display: block;
      content: '';
      height: 15px;
      width: 5px;
      background: linear-gradient(0deg, #B8EFEE 0%, #FFFFFF 100%);
      border-radius: 5px;
    }
  }

  .chat {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    .name {
      position: absolute;
      bottom: 0;
      left: 50%;
      font-size: 14px;
      transform: translateX(-50%);
    }

    :deep(.ant-progress-text) {
      font-size: 20px;
      font-weight: bold;
    }

    &.cpusyl {
      :deep(.ant-progress-text) {
        .pmzd-blue
      }
    }

    &.ncsyl {
      :deep(.ant-progress-text) {
        .pmzd-orange
      }
    }
  }
}

.cpio {
  display: flex;
  flex-direction: column;

  .topData {
    height: 100px;
    padding: 0 8px;
  }

  .cplx {
    font-size: 15px;
    font-family: Source Han Sans SC;
    font-weight: 500;
    color: #ACEAEA;
    margin: 8px 0;
  }

  .san {
    display: flex;
    width: 100%;
    justify-content: space-between;

    .sanItem {
      display: flex;
      align-items: center;
      flex-direction: column;

      .data {
        .pmzd-blue;
        font-size: 36px;
      }

      .name {
        font-size: 15px;
        font-family: Source Han Sans SC;
        font-weight: 500;
        color: #FFFFFF;
      }
    }
  }
}

.cpkj {
  display: flex;
  width: 100%;
  justify-content: space-between;

  .topData {
    height: 100px;
    width: 100%;
    //height: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 0 10px;

    .data {
      .pmzd-blue;
      font-size: 37px;
    }
  }
}
</style>
